<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Your app title</title>
<link href="/customer_plat/public/stylesheets/webix_3.0.4.css"
	rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css"
	href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.css">
<link rel="stylesheet" type="text/css"
	href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css">
<link href="/customer_plat/public/stylesheets/app.css" rel="stylesheet">
<script src="/customer_plat/public/javascripts/jquery.min.js"></script>
<script src="/customer_plat/public/javascripts/webix_3.0.4.js"
	type="text/javascript" charset="utf-8"></script>
<script src="/customer_plat/public/javascripts/vue.min.js"></script>
<script type="text/javascript">
	webix
			.ready(function() {
				var my_toolbar = {
					view : "toolbar",
					elements : [ {
						view : "datepicker",
						id : "start_date",
						timepicker : true,
						label : "起始日期",
						labelAlign : "right",
						name : "end",
						stringResult : true,
						format : "%Y-%m-%d",
						width : 240
					}, {
						view : "datepicker",
						id : "end_date",
						timepicker : true,
						label : "结束日期",
						labelAlign : "right",
						name : "end",
						stringResult : true,
						format : "%Y-%m-%d",
						width : 240
					}, {
						view : "button",
						value : "查询",
						width : 100,
						click : "select"
					} , {
						view : "button",
						value : "导出",
						width : 100,
						click : "exportExcel"
					} ]
				};
				var body = new webix.ui({
					container : "body",
					type : "line",
					id : "mylayout",
					rows : [  my_toolbar ],// ----rows结束----
				//----rows结束----
				});// ---webix.ui结束-
			});
</script>
</head>
<body style="background-color: #fff;">
	<div style=" margin-top: 20px; margin-left: 5px;">
		<div id="body"></div>
		<div id="app" style="height: 800px;overflow-y:scroll;">
			<div class='d-panel'>
				<table class="table table-striped table-bordered" >
					<tr v-for="list in numlist" track-by="$index">
						<td style="white-space:nowrap; word-break:  keep-all; width: 400px;">{{list.simple_specs_cust}}</td>
						<td>{{list.pr}}</td>
						<td v-for="col in columns" track-by="$index">{{list[col]}}</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var datelist = [];
		var materialIdList = [];
		var numlist = [];
		var numobj = {};
		var columns = [];
		var clcnums = [];
		var jsonlist = []; //report.demodata.data;

		function sortByKey(array, key) {
			return array.sort(function(a, b) {
				var x = a[key];
				var y = b[key];
				return ((x < y) ? -1 : ((x > y) ? 1 : 0));
			});
		}

		function guid() {
			function s4() {
				return Math.floor((1 + Math.random()) * 0x10000).toString(16)
						.substring(1);
			}
			return [ s4(), s4(), "-", s4(), "-", s4(), "-", s4(), "-", s4(),
					s4(), s4() ].join("");
		}

		function getSessionId() {
			var id = sessionStorage.getItem('session_id');
			if (!id) {
				id = guid();
				sessionStorage.setItem('session_id', id);
			}
			return id;
		}

		function apiCall(method, path, params, cb) {
			$.ajax({
				url :  path,
				method : method,
				cache : false,
				data : params,
				async:true,
				success : function(data) {
					cb(data);
				},
				error : function(xhr, status, data) {
					cb(jQuery.parseJSON(xhr.responseText));
				}
			});
		}
		function init() {
			var params = {};
			var url = "@{record.RecordAction.getCutterUseRecordInfo}";
			var start_date = $$("start_date").getValue();
			var end_date = $$("end_date").getValue();
			params["start_date"]= start_date.substring(0,10);
			params["end_date"] = end_date.substring(0,10);
			apiCall(
					'GET',
					url,
					params,
					function(data) {
						jsonlist = data;
						jsonlist
								.forEach(function(item, index) {
									if (datelist.indexOf(jsonlist[index].date) === -1) {
										datelist.push(jsonlist[index].date);
									}
									if (materialIdList
											.indexOf(jsonlist[index].material_id) === -1) {
										materialIdList
												.push(jsonlist[index].material_id);
									}
								})
						//console.log(JSON.stringify(materialIdList));
						datelist.sort();
						numobj.material_id = ' 编码';
						numobj.cutter_specs = ' 规格';
						numobj.simple_specs_cust = '物料';
						numobj.pr = ' 状态';
						datelist.forEach(function(date, index) {
							numobj['col' + index] = date;
							columns.push('col' + index);
						});
						numlist.push(numobj)

						datelist.forEach(function(date, index) {
							materialIdList.forEach(function(materialIds, index) {
								var newarr = jsonlist.filter(function(item) {
									return item.date === date
											&& item.material_id === materialIds;
								});
								// console.log(JSON.stringify(newarr)); 
								fillTable(newarr)
							})
						});
						//console.log(JSON.stringify(numlist)); 
						numlist = sortByKey(numlist, 'material_id');
						var numobj1 = {}
						var numobj2 = {}
						numobj1.material_id = 'SUM'
						numobj1.pr = '计划用量'
						numobj2.material_id = 'SUM'
						numobj2.pr = '实际用量'

						datelist.forEach(function(date, index) {
							numobj1['col' + index] = 0;
							numobj2['col' + index] = 0;
						});

						for (var i = 1; i < numlist.length; i++) {
							if (numlist[i].pr === '计划用量') {
								datelist
										.forEach(function(date, index) {
											if (numlist[i]['col' + index] !== '')
												numobj1['col' + index] = parseInt(numobj1['col'
														+ index])
														+ parseInt(numlist[i]['col'
																+ index])
										});
							} else {
								datelist
										.forEach(function(date, index) {
											if (numlist[i]['col' + index] !== '')
												numobj2['col' + index] = parseInt(numobj2['col'
														+ index])
														+ parseInt(numlist[i]['col'
																+ index])
										});
							}
						}
						;
					 
						numlist.push(numobj1);
						numlist.push(numobj2);
						//numlist.push(numobj2);
						
					});
  		};
		function fillTable(newarr) {
			newarr.forEach(function(item, index) {
				var has = '0';
				numobj = {};
				numobj.material_id = item.material_id;
				var cutterSpecs;
				var simple_specs_cust;
				// 获取规格
				for(var jsonv in jsonlist){  
					if(jsonlist[jsonv].material_id == item.material_id){
						cutterSpecs = jsonlist[jsonv].cutter_specs;
						simple_specs_cust = jsonlist[jsonv].simple_specs_cust;
					}
				}
				
				numobj.cutter_specs = cutterSpecs;
				numobj.simple_specs_cust = simple_specs_cust;
				if (item.type === 1) {
					numobj.pr = '计划用量';
				} else {
					numobj.pr = '实际领用';
				}
				datelist.forEach(function(date, index) {
					if (item.date === date) {
						numobj['col' + index] = item.num;
						for (var i = 0; i < numlist.length; i++) {
							if (numlist[i].material_id === numobj.material_id
									&& numlist[i].pr === numobj.pr
									&& numlist[i]['col' + index] === '') {
								numlist[i]['col' + index] = numobj['col'
										+ index];
								has = '1'
								break;
							}
						}
					} else
						numobj['col' + index] = '';
				});
				if (has === '0')
					numlist.push(numobj)

			});
		}
	function select(){
		var vm = new Vue({
			el : '#app',
			data : {
				numlist : numlist,
				columns : columns
			},
			methods : {
				init : init
			},
			ready : function() {
				this.init()
			}
		})
	}
	
	function exportExcel(){
		var start_date = $$("start_date").getValue();
		var end_date = $$("end_date").getValue();
		var startDate = start_date.substring(0,10);
		var endDate = end_date.substring(0,10);
		
		var excelUrl = "@{record.RecordAction.downCutterUseRecord}?start_date="+startDate+"&end_date="+endDate;
		//alert(excelUrl);
		window.location.href = excelUrl;
	}
 
	</script>
</body>
</html>
